<template>
	<div>
		<div id="balance_header">
			<div class="fl">
				<p class="p30">账户余额</p>
				<p class="p36">￥{{moneyData.remain}}</p>
			</div>
			<div class="fr">
				<p class="p30">{{thisMonth - 1}}月收益</p>
				<p v-if="lastMonth.flag == 1" class="p36">已纳入账户余额</p>
				<p class="p36">￥{{lastMonth.last_month_income}}</p>
			</div>
		</div>
		<div class="header-tip">
			<p class="fl">收益隔月纳入钱包：当月收益将在次月20号纳入</p>
			<router-link class="fr colored" to="/user/revenueMonthly">月收益记录</router-link>
		</div>
		<!-- 提现区 -->
		<div id="draw_money_container">
			<p class="p36">
				提现金额<span class="p32">（提现金额需不小于100元）</span>
			</p>
			<div id="input_container">
				￥<input type="number" :max="moneyData.remain" v-model="drawMoneyAmount">
			</div>
			<div id="draw_money_bottom">
				<p class="p32 colored" @click="drawAll">全部提现</p>
				<p class="p24 grey">一个工作日内到微信钱包</p>
			</div>
		</div>
		<div class="big-btn" :class="{disabled: drawMoneyAmount < 100}"
			@click="clickDrawMoney">提现到微信钱包</div>
	</div>
</template>
<script>
import { Indicator, Toast } from 'mint-ui'
import { mapGetters, mapActions } from 'vuex'
import { handleHistory } from '@/assets/js/utils'
import WxLogin from '@/api/wxlogin'
export default{
	name:'Revenue',
	data(){
		return {
			drawMoneyAmount : ''
		}
	},
	async created(){
		WxLogin.ifWxPayLoggedIn()
		this.getLastMonth()
	},
	computed:{
		...mapGetters({
			moneyData: 'moneyData',
			thisMonth: 'thisMonth',
			lastMonth: 'lastMonth',
			userInfo: 'user/userInfo'
		})
	},
	methods:{
		...mapActions(['getLastMonth', 'drawMoney']),
		async clickDrawMoney(){
			if(this.drawMoneyAmount >= 100) {
				const {success, msg} = await this.drawMoney(this.drawMoneyAmount)
				if(success) Toast('取现成功')
				else Toast(msg)
			}
		},
		drawAll(){
			this.drawMoneyAmount = this.moneyData.remain
			this.clickDrawMoney()
		}
	}
}
</script>
<style lang='less' scoped>
	#balance_header{
		background: linear-gradient(0deg, #fb4a4a 0%, #fb794a 99%);
		padding: .8rem 1rem;
		line-height: .8rem;
		overflow: hidden;
		text-align: center;
		color: #fff;

	}
	#draw_money_container{
		background: #fff;
		padding: .3rem .3rem 0;
	}
	#input_container{
		padding: .3rem 0;
		border-bottom: 1px solid #dcdcdc;
		font-size: 1.17rem;
   		color: #333;
		input{
			margin-left: .2rem;
			display: inline-block;
			width: 7rem;
			font-size: 1.17rem;
		}
	}
	#draw_money_bottom{
		text-align: right;
		line-height: .7rem;
		padding: .2rem 0;
	}
	.big-btn{
		margin: 2.93rem auto;
	}
</style>